<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>慢生活 · 旅行日记</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: '#F5F7FA',
            dark: '#333647',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-float-delay-1 {
        animation: float 6s ease-in-out 1s infinite;
      }
      .animate-float-delay-2 {
        animation: float 6s ease-in-out 2s infinite;
      }
      .masonry-grid {
        column-count: 1;
        column-gap: 1rem;
      }
      @screen md {
        .masonry-grid {
          column-count: 2;
        }
      }
      @screen lg {
        .masonry-grid {
          column-count: 3;
        }
      }
      .masonry-item {
        break-inside: avoid;
        margin-bottom: 1rem;
      }
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }
    
    .hero-gradient {
      background: linear-gradient(135deg, rgba(22,93,255,0.8) 0%, rgba(22,93,255,0.4) 100%);
    }
    
    .card-hover {
      transition: all 0.3s ease;
    }
    
    .card-hover:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .nav-link {
      position: relative;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #165DFF;
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after {
      width: 100%;
    }
    
    .video-thumb {
      position: relative;
      overflow: hidden;
    }
    
    .video-thumb::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
      );
      transform: skewX(-25deg);
      transition: all 0.75s;
    }
    
    .video-thumb:hover::before {
      left: 125%;
    }
    
    .barrage {
      position: absolute;
      white-space: nowrap;
      font-size: 16px;
      pointer-events: none;
      animation: barrageMove linear infinite;
    }
    
    @keyframes barrageMove {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  </style>
</head>
<body class="font-inter bg-neutral text-dark min-h-screen">
  <!-- 页面容器 -->
  <div id="app" class="min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md z-50 transition-all duration-300 shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <a href="#home" class="text-2xl font-bold text-primary flex items-center">
          <i class="fa-solid fa-paper-plane mr-2"></i>
          <span>慢生活</span>
        </a>
        
        <div class="hidden md:flex space-x-8">
          <a href="#home" class="nav-link font-medium">首页</a>
          <a href="travel-detail.html" class="nav-link font-medium">旅行足迹</a>
          <a href="photo-wall-details.html" class="nav-link font-medium">照片墙</a>
          <a href="video-sharing-list.html" class="nav-link font-medium">视频分享</a>
           <a href="calendar-wall-3d.html" class="nav-link font-medium">日历墙</a>
           <a href="blind-box-music-enhancement.html" class="nav-link font-medium">生活盲盒</a>
        </div>
        
        <div class="md:hidden">
          <button id="menu-toggle" class="text-dark focus:outline-none">
            <i class="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>
      
      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
          <a href="#home" class="py-2 font-medium">首页</a>
          <a href="travel-detail.html" class="py-2 font-medium">旅行足迹</a>
          <a href="photo-wall-details.html" class="py-2 font-medium">照片墙</a>
          <a href="video-sharing-list.html" class="py-2 font-medium">视频分享</a>
          <a href="calendar-wall-3d.html" class="py-2 font-medium">日历墙</a>
          <a href="blind-box-music-enhancement.html" class="py-2 font-medium">生活盲盒</a>
        </div>
      </div>
    </nav>
    
    <!-- 页面内容 -->
    <main class="flex-grow pt-16">
      <!-- 闲适生活引导页 -->
      <section id="home" class="min-h-screen relative flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
          <div class="absolute inset-0 bg-black/30 z-10"></div>
          <img src="https://picsum.photos/id/1015/1920/1080" alt="背景图" class="w-full h-full object-cover">
        </div>
        
        <div class="container mx-auto px-4 z-20 text-center">
          <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 text-shadow-lg leading-tight">
            慢下来，<br>感受生活的美好
          </h1>
          <p class="text-[clamp(1rem,3vw,1.5rem)] text-white/90 mb-10 max-w-3xl mx-auto text-shadow">
            记录旅行中的每一个精彩瞬间，分享生活中的点滴感悟
          </p>
          <a href="#travel" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
            开始探索 <i class="fa-solid fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <!-- 装饰元素 -->
        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
          <div class="animate-bounce text-white/80 text-3xl">
            <i class="fa-solid fa-chevron-down"></i>
          </div>
        </div>
        
        <!-- 漂浮元素 -->
        <div class="absolute top-1/4 left-1/4 text-4xl text-white/60 animate-float">
          <i class="fa-solid fa-camera"></i>
        </div>
        <div class="absolute top-1/3 right-1/4 text-3xl text-white/60 animate-float-delay-1">
          <i class="fa-solid fa-mountain"></i>
        </div>
        <div class="absolute bottom-1/4 left-1/3 text-5xl text-white/60 animate-float-delay-2">
          <i class="fa-solid fa-umbrella-beach"></i>
        </div>
      </section>
      
      <!-- 旅游经历展示 -->
      <section id="travel" class="py-20 bg-white">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">旅行足迹</h2>
            <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
            <p class="text-lg text-dark/70 max-w-2xl mx-auto">探索世界的每一个角落，感受不同的文化与风景</p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 旅行卡片 1 -->
            <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md">
              <div class="relative h-64 overflow-hidden">
                <img src="https://picsum.photos/id/10/800/600" alt="海边风景" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                  <div class="p-6">
                    <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">2023.05</span>
                    <h3 class="text-xl font-bold text-white mt-2">三亚海边度假</h3>
                  </div>
                </div>
              </div>
              <div class="p-6">
                <p class="text-dark/70 mb-4">在三亚度过了一个难忘的假期，湛蓝的海水、洁白的沙滩，还有热情好客的当地人...</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                    <span class="ml-2 text-sm font-medium">慢生活</span>
                  </div>
                  <a href="travel-detail.html" class="text-primary font-medium flex items-center">
                    阅读更多 <i class="fa-solid fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
            
            <!-- 旅行卡片 2 -->
            <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md">
              <div class="relative h-64 overflow-hidden">
                <img src="https://picsum.photos/id/15/800/600" alt="古城风景" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                  <div class="p-6">
                    <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">2023.09</span>
                    <h3 class="text-xl font-bold text-white mt-2">丽江古城漫步</h3>
                  </div>
                </div>
              </div>
              <div class="p-6">
                <p class="text-dark/70 mb-4">丽江古城的石板路、纳西族的传统文化、还有那座古老的木府，都让人感受到了历史的厚重...</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                    <span class="ml-2 text-sm font-medium">慢生活</span>
                  </div>
                  <a href="photo-wall-details.html" class="text-primary font-medium flex items-center">
                    阅读更多 <i class="fa-solid fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
            
            <!-- 旅行卡片 3 -->
            <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md">
              <div class="relative h-64 overflow-hidden">
                <img src="https://picsum.photos/id/28/800/600" alt="雪山风景" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                  <div class="p-6">
                    <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">2024.01</span>
                    <h3 class="text-xl font-bold text-white mt-2">玉龙雪山探险</h3>
                  </div>
                </div>
              </div>
              <div class="p-6">
                <p class="text-dark/70 mb-4">攀登玉龙雪山是一次挑战自我的经历，海拔4680米的高度，让我感受到了大自然的震撼...</p>
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                    <span class="ml-2 text-sm font-medium">慢生活</span>
                  </div>
                  <a href="video-sharing-list.html" class="text-primary font-medium flex items-center">
                    阅读更多 <i class="fa-solid fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="text-center mt-12">
            <a href="#" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-3 px-8 rounded-full transition-all duration-300">
              查看更多旅行故事 <i class="fa-solid fa-compass ml-2"></i>
            </a>
          </div>
        </div>
      </section>
      
      <!-- 图片瀑布流展示 -->
      <section id="gallery" class="py-20 bg-neutral">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">照片墙</h2>
            <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
            <p class="text-lg text-dark/70 max-w-2xl mx-auto">用镜头记录生活中的美好瞬间</p>
          </div>
          
          <div class="masonry-grid">
            <!-- 瀑布流项目 1 -->
            <div class="masonry-item">
              <div class="bg-white rounded-xl overflow-hidden shadow-md">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/29/800/1200" alt="风景照片" class="w-full object-cover">
                  <div class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300">
                      <i class="fa-solid fa-heart"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full mx-3 transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-75">
                      <i class="fa-solid fa-share-alt"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-150">
                      <i class="fa-solid fa-expand"></i>
                    </button>
                  </div>
                </div>
                <div class="p-6">
                  <h3 class="text-xl font-bold text-dark mb-2">山间云雾</h3>
                  <p class="text-dark/70 mb-4">清晨的山间，云雾缭绕，宛如仙境。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-calendar-alt mr-1"></i> 2024.02.15</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 245</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 18</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 瀑布流项目 2 -->
            <div class="masonry-item">
              <div class="bg-white rounded-xl overflow-hidden shadow-md">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/42/800/600" alt="美食照片" class="w-full object-cover">
                  <div class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300">
                      <i class="fa-solid fa-heart"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full mx-3 transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-75">
                      <i class="fa-solid fa-share-alt"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-150">
                      <i class="fa-solid fa-expand"></i>
                    </button>
                  </div>
                </div>
                <div class="p-6">
                  <h3 class="text-xl font-bold text-dark mb-2">街头美食</h3>
                  <p class="text-dark/70 mb-4">城市小巷里的特色美食，总能带给人意想不到的惊喜。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-calendar-alt mr-1"></i> 2024.03.08</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 312</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 24</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 瀑布流项目 3 -->
            <div class="masonry-item">
              <div class="bg-white rounded-xl overflow-hidden shadow-md">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/65/800/1000" alt="城市照片" class="w-full object-cover">
                  <div class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300">
                      <i class="fa-solid fa-heart"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full mx-3 transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-75">
                      <i class="fa-solid fa-share-alt"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-150">
                      <i class="fa-solid fa-expand"></i>
                    </button>
                  </div>
                </div>
                <div class="p-6">
                  <h3 class="text-xl font-bold text-dark mb-2">城市夜景</h3>
                  <p class="text-dark/70 mb-4">华灯初上的城市，展现出与白天截然不同的魅力。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-calendar-alt mr-1"></i> 2024.04.22</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 456</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 37</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 瀑布流项目 4 -->
            <div class="masonry-item">
              <div class="bg-white rounded-xl overflow-hidden shadow-md">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/76/800/700" alt="自然照片" class="w-full object-cover">
                  <div class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300">
                      <i class="fa-solid fa-heart"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full mx-3 transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-75">
                      <i class="fa-solid fa-share-alt"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-150">
                      <i class="fa-solid fa-expand"></i>
                    </button>
                  </div>
                </div>
                <div class="p-6">
                  <h3 class="text-xl font-bold text-dark mb-2">森林漫步</h3>
                  <p class="text-dark/70 mb-4">走进森林，感受大自然的气息，聆听鸟儿的歌声。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-calendar-alt mr-1"></i> 2024.05.05</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 289</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 22</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 瀑布流项目 5 -->
            <div class="masonry-item">
              <div class="bg-white rounded-xl overflow-hidden shadow-md">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/87/800/900" alt="人文照片" class="w-full object-cover">
                  <div class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300">
                      <i class="fa-solid fa-heart"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full mx-3 transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-75">
                      <i class="fa-solid fa-share-alt"></i>
                    </button>
                    <button class="bg-white text-primary p-3 rounded-full transform translate-y-4 hover:translate-y-0 transition-transform duration-300 delay-150">
                      <i class="fa-solid fa-expand"></i>
                    </button>
                  </div>
                </div>
                <div class="p-6">
                  <h3 class="text-xl font-bold text-dark mb-2">传统文化</h3>
                  <p class="text-dark/70 mb-4">传统手工艺人的精湛技艺，传承着千年的文化底蕴。</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-calendar-alt mr-1"></i> 2024.05.18</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 342</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 29</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="text-center mt-12">
            <button class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-lg">
              加载更多照片 <i class="fa-solid fa-images ml-2"></i>
            </button>
          </div>
        </div>
      </section>
      
      <!-- 电影播放页 -->
      <section id="video" class="py-20 bg-dark text-white">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-white mb-4">视频分享</h2>
            <div class="w-20 h-1 bg-secondary mx-auto mb-6"></div>
            <p class="text-lg text-white/70 max-w-2xl mx-auto">记录旅行中的精彩瞬间，分享生活中的美好时刻</p>
          </div>
          
          <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 视频播放区 -->
            <div class="lg:col-span-3">
              <div class="bg-black rounded-xl overflow-hidden shadow-xl relative">
                <!-- 视频播放器 -->
                <div class="aspect-video bg-black/50 relative">
                  <img src="https://picsum.photos/id/96/1200/675" alt="视频封面" class="w-full h-full object-cover">
                  <div class="absolute inset-0 flex items-center justify-center">
                    <button id="play-button" class="bg-secondary/90 hover:bg-secondary text-white w-20 h-20 rounded-full flex items-center justify-center transform transition-transform hover:scale-110">
                      <i class="fa-solid fa-play text-3xl"></i>
                    </button>
                  </div>
                  
                  <!-- 弹幕容器 -->
                  <div id="barrage-container" class="absolute inset-0 pointer-events-none overflow-hidden"></div>
                </div>
                
                <!-- 视频控制栏 -->
                <div class="p-6 bg-gradient-to-t from-black to-transparent">
                  <h3 class="text-2xl font-bold mb-2">三亚旅行Vlog</h3>
                  <div class="flex items-center text-white/70 text-sm mb-4">
                    <span class="mr-4"><i class="fa-solid fa-eye mr-1"></i> 12,456</span>
                    <span class="mr-4"><i class="fa-solid fa-heart mr-1"></i> 876</span>
                    <span class="mr-4"><i class="fa-solid fa-comment mr-1"></i> 124</span>
                    <span><i class="fa-solid fa-calendar-alt mr-1"></i> 2024.05.20</span>
                  </div>
                  
                  <!-- 弹幕发送区 -->
                  <div class="flex items-center">
                    <input type="text" id="barrage-input" placeholder="发送弹幕..." class="flex-grow bg-white/10 border border-white/20 rounded-l-full px-4 py-2 focus:outline-none focus:border-secondary text-white">
                    <button id="send-barrage" class="bg-secondary hover:bg-secondary/90 text-white px-6 py-2 rounded-r-full transition-colors">
                      发送
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 视频列表 -->
            <div class="space-y-4">
              <h4 class="text-xl font-bold mb-4">推荐视频</h4>
              
              <!-- 视频项目 1 -->
              <div class="video-thumb bg-dark/50 rounded-lg overflow-hidden flex items-center cursor-pointer hover:bg-dark/30 transition-colors">
                <div class="w-24 h-24 relative">
                  <img src="https://picsum.photos/id/100/200/200" alt="视频缩略图" class="w-full h-full object-cover">
                  <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">05:24</div>
                </div>
                <div class="ml-4 flex-grow">
                  <h5 class="font-medium line-clamp-2">丽江古城漫步，感受纳西族文化</h5>
                  <p class="text-white/60 text-sm mt-1">3.2万次观看</p>
                </div>
              </div>
              
              <!-- 视频项目 2 -->
              <div class="video-thumb bg-dark/50 rounded-lg overflow-hidden flex items-center cursor-pointer hover:bg-dark/30 transition-colors">
                <div class="w-24 h-24 relative">
                  <img src="https://picsum.photos/id/101/200/200" alt="视频缩略图" class="w-full h-full object-cover">
                  <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">07:15</div>
                </div>
                <div class="ml-4 flex-grow">
                  <h5 class="font-medium line-clamp-2">玉龙雪山登顶之旅，挑战海拔4680米</h5>
                  <p class="text-white/60 text-sm mt-1">5.7万次观看</p>
                </div>
              </div>
              
              <!-- 视频项目 3 -->
              <div class="video-thumb bg-dark/50 rounded-lg overflow-hidden flex items-center cursor-pointer hover:bg-dark/30 transition-colors">
                <div class="w-24 h-24 relative">
                  <img src="https://picsum.photos/id/102/200/200" alt="视频缩略图" class="w-full h-full object-cover">
                  <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">04:38</div>
                </div>
                <div class="ml-4 flex-grow">
                  <h5 class="font-medium line-clamp-2">大理洱海骑行，环海一日游</h5>
                  <p class="text-white/60 text-sm mt-1">2.9万次观看</p>
                </div>
              </div>
              
              <!-- 视频项目 4 -->
              <div class="video-thumb bg-dark/50 rounded-lg overflow-hidden flex items-center cursor-pointer hover:bg-dark/30 transition-colors">
                <div class="w-24 h-24 relative">
                  <img src="https://picsum.photos/id/103/200/200" alt="视频缩略图" class="w-full h-full object-cover">
                  <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">06:21</div>
                </div>
                <div class="ml-4 flex-grow">
                  <h5 class="font-medium line-clamp-2">香格里拉草原风光，蓝天白云下的自由</h5>
                  <p class="text-white/60 text-sm mt-1">4.1万次观看</p>
                </div>
              </div>
              
              <!-- 视频项目 5 -->
              <div class="video-thumb bg-dark/50 rounded-lg overflow-hidden flex items-center cursor-pointer hover:bg-dark/30 transition-colors">
                <div class="w-24 h-24 relative">
                  <img src="https://picsum.photos/id/104/200/200" alt="视频缩略图" class="w-full h-full object-cover">
                  <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">08:42</div>
                </div>
                <div class="ml-4 flex-grow">
                  <h5 class="font-medium line-clamp-2">云南美食之旅，品味当地特色小吃</h5>
                  <p class="text-white/60 text-sm mt-1">6.3万次观看</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.1)] z-40 md:hidden">
      <div class="flex justify-around items-center h-16">
        <a href="#home" class="flex flex-col items-center justify-center text-primary">
          <i class="fa-solid fa-home text-xl"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a href="travel-detail.html" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-map-marker-alt text-xl"></i>
          <span class="text-xs mt-1">旅行</span>
        </a>
        <a href="photo-wall-details.html" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-images text-xl"></i>
          <span class="text-xs mt-1">照片</span>
        </a>
        <a href="video-sharing-list.html" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-video text-xl"></i>
          <span class="text-xs mt-1">视频</span>
        </a>
        <a href="calendar-wall-3d.html" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-video text-xl"></i>
          <span class="text-xs mt-1">日历</span>
        </a>
        <a href="blind-box-music-enhancement.html" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-video text-xl"></i>
          <span class="text-xs mt-1">盲盒</span>
        </a>
      </div>
    </nav>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white/70 py-12 md:py-16 mt-auto md:mt-0 md:mb-0 mb-16">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div class="md:col-span-2">
            <h3 class="text-xl font-bold text-white mb-4 flex items-center">
              <i class="fa-solid fa-paper-plane mr-2"></i>
              慢生活
            </h3>
            <p class="mb-6">记录旅行中的每一个精彩瞬间，分享生活中的点滴感悟。慢下来，感受生活的美好。</p>
            <div class="flex space-x-4">
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-weibo"></i>
              </a>
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-wechat"></i>
              </a>
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-instagram"></i>
              </a>
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-youtube"></i>
              </a>
            </div>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold text-white mb-4">快速链接</h4>
            <ul class="space-y-2">
              <li><a href="#home" class="hover:text-primary transition-colors">首页</a></li>
              <li><a href="#travel" class="hover:text-primary transition-colors">旅行足迹</a></li>
              <li><a href="#gallery" class="hover:text-primary transition-colors">照片墙</a></li>
              <li><a href="#video" class="hover:text-primary transition-colors">视频分享</a></li>
              <li><a href="#" class="hover:text-primary transition-colors">关于我</a></li>
            </ul>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold text-white mb-4">联系方式</h4>
            <ul class="space-y-2">
              <li class="flex items-center"><i class="fa-solid fa-envelope mr-2"></i> contact@manlife.com</li>
              <li class="flex items-center"><i class="fa-solid fa-phone mr-2"></i> +86 123 4567 8910</li>
              <li class="flex items-center"><i class="fa-solid fa-map-marker-alt mr-2"></i> 中国，云南，丽江</li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-white/10 mt-10 pt-6 text-center text-sm">
          <p>&copy; 2024 慢生活 · 旅行日记. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
  
  <script>
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 导航栏滚动效果
    const nav = document.querySelector('nav');
    
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-4');
      } else {
        nav.classList.add('py-4');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
    
    // 视频播放按钮
    const playButton = document.getElementById('play-button');
    // 可以在这里添加视频播放的逻辑
  </script>
</html>